// 这是项目的入口文件

console.log("ok!!!");

// 导入 vue，这里的是提供 runtime-only 方式的，需要 cnpm i vue-loader vue-template-compiler -D，以及在配置文件中引入vueLoaderPlugin
import Vue from "vue"

// 1.1导入路由vue-router
import VueRouter from "vue-router"
// 1.2注册路由
Vue.use(VueRouter);
// 1.3导入自定义的路由模块
import routers from "./router.js"

// 实现加入购物车对于商品数据的保存及底部购物车徽标数量的显示处理？
// 运用 vuex 状态管理工具来实现，是一个存储共享数据的公共区域，store 的配置对象中，目前有 state mutations getters 三个配置属性
// 1. 运行 cnpm i vuex -S
// 2. 导入 vuex 包
import Vuex from "vuex"
// 3. 将 Vuex 注册到 Vue 中
Vue.use(Vuex)

// 页面只要一刷新，都需要获取购物车数据，我们知道，项目执行肯定会执行 main.js 这个入口文件，所以我们在这里获取 localstorage 的 cart
var cart = JSON.parse(localStorage.getItem("cart") || '[]');

// 4. new Vuex.Store({}) 一个 store 实例，是一个配置对象
var store = new Vuex.Store({
    state:{          // this.$store.state.***
        cart:cart      // 购物车数组，里面可能有多个 商品对象
    },
    mutations:{      // this.$store.commit("方法名",唯一的一个参数)
        // 方法的第一个参数为 state 状态，第二个参数为 commit 提交过来的参数
        // 目前对于 cart 购物车数组，我们可以暂时设计里边的商品对象为这样：
        // { id: 商品ID, count: 商品数量, price: 商品单价, selected: true 是否选中默认为true }
        addTocart(state,goodsinfo){     // 点击加入购物车
            // 分析：
            // 1. 如果加入购物车，发现之前有添加过该商品了，则直接更新该商品数量 count 即可，不用再 push
            // 2. 如果加入购物车，之前没有添加过，即直接将该商品对象 push 到 cart数组中即可
            
            // 假设默认没添加过该商品，flag 为 false，表示没有添加过
            var flag = false;

            // 情况1：查找之前是否添加过，如果添加过，则更新数量，并终止循环
            state.cart.some(item => {
                if (item.id == goodsinfo.id){
                    item.count += parseInt(goodsinfo.count);    // 传递过来的商品对象的数量值不一定是整数，转换一下
                    flag = true;
                    return true;
                }
            })

            // 情况2：如果循环结束，flag 还是 false，那就说明没有添加过该商品，直接push到数组中
            if(flag === false){
                state.cart.push(goodsinfo);
            }

            // 将购物车进行 本地存储，无论是更新数量还是新添加商品，都在最后把购物车数据cart保存到 localstorage 中
            localStorage.setItem("cart",JSON.stringify(state.cart));

        },
        updateGoodsInfo(state,goodsinfo){   // 购物车页面中点击修改商品数量，更新同步到 store 中
            // 修改购物车页面中商品的数量值
            state.cart.some(item => {
                if(item.id == goodsinfo.id){
                    item.count = parseInt(goodsinfo.count);
                    return true;
                }
            })

            // 修改完商品数量值后将最新的 cart 同步到 localstorage 中去，因为一刷新就是获取本地存储的cart数据
            localStorage.setItem("cart",JSON.stringify(state.cart));
        },
        updateGoodsSelected(state,goodsinfo){   // 购物车页面中点击商品选中状态，更新同步到 store 中
            // 修改购物车页面中商品的勾选状态
            state.cart.some(item => {
                if(item.id == goodsinfo.id){
                    item.selected = goodsinfo.selected;
                    return true;
                }
            })

            // 修改完商品勾选状态后将最新的 cart 同步到 localstorage 中去，因为一刷新就是获取本地存储的cart数据赋给store的cart
            localStorage.setItem("cart",JSON.stringify(state.cart));            
        },
        updateGoodsselectedAll(state,selectall){
            state.cart.forEach(item => {
                item.selected = selectall;
            })
            
            // 修改完全选与否的商品勾选状态后将最新的 cart 同步到 localstorage 中去，因为一刷新就是获取本地存储的cart
            localStorage.setItem("cart",JSON.stringify(state.cart));
        },
    },
    getters:{        // this.$store.getters.***
        // 相当于 计算属性，也类似 filters
        // 参数为 state 状态
        getAllcount(state){         // 获取购物车商品的总数，用于显示徽标上
            var c = 0;
            state.cart.forEach(item => {
                c += item.count;
            })
            return c;
        },
        getgoodsIdCount(state){          // 存储一个对象，键值为 cart的id与count
            var o = {};
            state.cart.forEach(item => {
                o[item.id] = item.count;
            })
            return o;
        },
        getgoodsIdSelected(state){      // 存储一个对象，键值为 cart的id与selected
            var o = {};
            state.cart.forEach(item => {
                o[item.id] = item.selected;
            })
            return o;
        },
        getgoodsCountPrice(state){      // 存储一个对象，键值为 cart的总数及总价
            var o = {
                count:0,    // 勾选的数量
                amount:0    // 勾选的总价
            };
            state.cart.forEach(item => {
                if(item.selected){
                    o.count += item.count;
                    o.amount += item.count * item.price;
                }
            })
            return o;
        },
        getgoodsAllselected(state){    // 返回底部全选按钮是否选中
            var len = 0;   // 商品勾选状态为选中的数量
            var o = {
                sel:false      // 默认是否全选
            };
            state.cart.forEach(item => {
                if(item.selected){
                    len ++;
                }
            })
            if(len == state.cart.length){
                o.sel = true;
            }
            return o;
        }
    }
})


// 定义全局过滤器，格式化日期时间(使用node的moment插件)
// a.cnpm i moment -S
// b.import moment from "moment"
// c.mement("2019-05-23 12:12:12").format("YYYY-MM-DD HH:mm:ss")
import moment from "moment"
Vue.filter("dateFormat",(dataStr,pattern = "YYYY-MM-DD")=>{
    return moment(dataStr).format(pattern);
});


// 按需导入 Mint-UI 中的组件
/*import { Header, Swipe, SwipeItem, Button, Popup, Lazyload } from "mint-ui";
Vue.component(Header.name,Header);
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
Vue.component(Button.name, Button);
Vue.component(Popup.name, Popup);
Vue.use(Lazyload);*/

// 使用 mint-ui 的 懒加载 技术，不能使用按需导入，只能全部导入 mint-ui
import MintUI from "mint-ui"
import "mint-ui/lib/style.css"
Vue.use(MintUI)

// 导入 mui 样式文件，使用 Tabbar 代码
import "./lib/mui/css/mui.min.css"
// 导入 Tabbar 扩展图标的样式文件
import "./lib/mui/css/icons-extra.css"


// 导入 axios，用来替换 vue-resource 的，vue-resource 是 Vue.use(VueResource)
import axios from "axios"
// 全局配置主域名--根路径，然后在页面发起请求地址前面不需要再加 /
axios.defaults.baseURL = 'http://www.liulongbin.top:3005';
// 全局配置 post 请求，提交方式设置为 普通表单提交方式，后续用到 post 提交时，可以不写
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = [function (data) {
    let ret = ''
    for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
    }
    return ret
}]
// Vue.use(axios) axios不能用use 只能修改原型链
Vue.prototype.$http = axios;

// 图片分享详情用的缩略图插件 vue-preview
// 安装 图片预览插件
// 1、cnpm vue-preview -S
// 2、 import VuePreview from "vue-preview"
import VuePreview from "vue-preview"
Vue.use(VuePreview)


// 导入 App.vue 根组件渲染
import app from "./App.vue"

var vm = new Vue({
    el:'#app',
    render: c => c(app),
    router:routers,      // 1.4挂载路由
    store:store          // 5. 将 store 实例挂载到 vm 实例上，只要挂载到 vm 上，任何组件都能使用 store
})


